<template>
  <div class="components-container">
     <el-form ref="postForm" :rules="rules"  :model="postForm" >
  <!--  <aside>
      <a href="#">即时点名签到</a>
    </aside> -->
    <count-to
      ref="example"
      :start-val="_startVal"
      :end-val="_endVal"
      :duration="_duration"
      :decimals="_decimals"
      :useEasing="false"
      :separator="_separator"
      :prefix="_prefix"
      :suffix="_suffix"
      :autoplay="false"
      @finished="finished"
      class="example"
    />
    <el-row :gutter="10" style="margin-left: 0%;margin-top: 40px;">
      <el-col :span="5">
        <el-form-item label="班级" label-width="60px"  prop="classsId">
          <el-cascader v-model="postForm.classsId" :options="classs" :props="cascaderProps" clearable placeholder="请选择"></el-cascader>
        </el-form-item>
      </el-col>
      <el-col :span="5">
        <el-form-item label="暗号" label-width="60px" prop="answer" >
          <el-input v-model="postForm.answer" />
        </el-form-item>
      </el-col>
      <el-col :span="3">
        <el-form-item label="刷新" label-width="60px">
          <el-input v-model="postForm.refreshTime" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
       <el-form-item label="时长" label-width="60px"  >
          <el-radio v-model="setStartVal" :label="15" @change="resetTime(15)">15秒</el-radio>
          <el-radio v-model="setStartVal" :label="30" @change="resetTime(30)">30秒</el-radio>
          <el-radio v-model="setStartVal" :label="60" @change="resetTime(60)">60秒</el-radio>
          <el-radio v-model="setStartVal" :label="90" @change="resetTime(90)">90秒</el-radio>
       </el-form-item>
      </el-col>
      <el-col :span="1">
        <div class="startBtn example-btn" @click="start">
          开始
         </div>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-left: 2%;margin-top: 10px;">
      <el-col :span="10" v-if="clockList.length>0">
             <el-tag>已签到：{{total}}/{{clockList.length}}</el-tag>
             <el-table  stripe max-height="300"  :data="clockList" border fit highlight-current-row style="width: 100%" >
               <el-table-column prop="username" label="用户名"  />
               <el-table-column prop="realname" label="姓名" />
               <el-table-column prop="time" label="签到时间" />
             </el-table>
      </el-col>
      <el-col :span="10" v-if="showqrcode">
          <el-image
          style="width: 350px; height: 350px;position:absolute;right:200px;"
          :src="qrcodeurl"
          >
          </el-image>
      </el-col>
      <el-col :span="10"  v-if="unClockList.length>0">
             <el-tag>未签到：{{total}}/{{unClockList.length}}</el-tag>
             <el-table  stripe max-height="300" :data="unClockList" border fit highlight-current-row style="width: 100%" >
               <el-table-column prop="username" label="用户名"  />
               <el-table-column prop="realname" label="姓名" />
             </el-table>
      </el-col>
    </el-row>

   <!-- <aside>&lt;count-to :start-val=&#x27;{{ _startVal }}&#x27; :end-val=&#x27;{{ _endVal }}&#x27; :duration=&#x27;{{ _duration }}&#x27;
      :decimals=&#x27;{{ _decimals }}&#x27; :separator=&#x27;{{ _separator }}&#x27; :prefix=&#x27;{{ _prefix }}&#x27; :suffix=&#x27;{{ _suffix }}&#x27;
      :autoplay=false&gt;</aside> -->
    </el-form>
   </div>
</template>

<script>
import API from '@/api/teach/student'
import countTo from '@/components/countTo/vue-countTo'
import classsAPI from '@/api/classs'

  const defaultForm = {
   classsId: null,
   answer:null,
   refreshTime:5
  }

export default {
  name: 'answerClock',
  components: { countTo },
  data() {
    return {
      postForm: Object.assign({}, defaultForm),
      cascaderProps: {value: 'id',label:'name',children:'childs',emitPath:false},
      rules: {
        classsId: [{ required: true, message: '请选择班级', trigger: 'blur' }],
        answer: [{ required: true, message: '请填写暗号', trigger: 'blur' }]
      },
      clockList:[],
      unClockList:[],
      total:0,
      classs: [],
      setStartVal: 60,
      setEndVal: 0,
      setDuration: 1000,
      setDecimals: 0,
      setSeparator: ',',
      setSuffix: ' 秒',
      setPrefix: '  ',
      timer:null,
      showqrcode:false,
      qrcodeurl:""
    }
  },
  computed: {
    _startVal() {
      if (this.setStartVal) {
        return this.setStartVal
      } else {
        return 0
      }
    },
    _endVal() {
      if (this.setEndVal) {
        return this.setEndVal
      } else {
        return 0
      }
    },
    _duration() {
      if (this.setDuration) {
        return this.setDuration*this._startVal
      } else {
        return 1000
      }
    },
    _decimals() {
      if (this.setDecimals) {
        if (this.setDecimals < 0 || this.setDecimals > 20) {
          alert('digits argument must be between 0 and 20')
          return 0
        }
        return this.setDecimals
      } else {
        return 0
      }
    },
    _separator() {
      return this.setSeparator
    },
    _suffix() {
      return this.setSuffix
    },
    _prefix() {
      return this.setPrefix
    }
  },
  created() {
     this.getClasss()
  },
  mounted() {

  },
  methods: {
    getClasss() {
      classsAPI.fetchList().then(response => {
        if (!response.data.items) return
        this.classs = response.data.items;
      })
    },
    genqrcode(){
       this.showqrcode=true
       //this.qrcodeurl=this.$baseUrl+'/api/qrcode?text='+this.$baseUrl+'/api/stu/clock/'+this.postForm.answer+'&size=10'
       this.qrcodeurl=this.$baseUrl+'/api/qrcode?text='+this.postForm.answer.trim()+'&size=10'
    },
    start() {
      var that=this
      this.$refs['postForm'].validate((valid) => {
        if (valid) {
         API.clock({classid:this.postForm.classsId,answer:this.postForm.answer.trim(),expire:this.setStartVal}).then(() => {
             this.$refs.example.start()
             this.clockList=[];
             this.unClockList=[];
             this.total=0
             this.genqrcode()
             this.timer=setInterval(function(){
               API.clockList({classid:that.postForm.classsId}).then(response => {
                  that.clockList= response.data.items;
                  that.total=response.data.total
               });
             },1000*that.postForm.refreshTime)
         })
        }
      })

    },
    pauseResume() {
      this.$refs.example.pauseResume()
    },
    resetTime(t){
      this.setStartVal=t;
      this.$refs.example.reset()
    },
    finished(){
      var that=this
      this.showqrcode=false //一隐藏二维码
      clearInterval(this.timer)
      //最后在调用一次
      API.clockList({classid:that.postForm.classsId}).then(response => {
         that.clockList= response.data.items;
         that.total=response.data.total
      });
      API.unclockList({classid:this.postForm.classsId}).then(response => {
          that.unClockList= response.data.items;
          that.total=response.data.total
      });
    },
   /* progress(val){
      if(val%this.postForm.refreshTime==0){
        var that=this
        API.clockList({classid:this.postForm.classsId}).then(response => {
           that.clockList= response.data.items;
           that.total=response.data.total
        });
      }
    } */
  }
}
</script>

<style scoped>
.example-btn {
  display: inline-block;
  margin-bottom: 0;
  font-weight: 500;
  text-align: center;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  line-height: 1.5;
  padding: 4px 15px;
  font-size: 12px;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1);
  transition: all .3s cubic-bezier(.645, .045, .355, 1);
  position: relative;
  color: rgba(0, 0, 0, .65);
  background-color: #fff;
  border-color: #d9d9d9;
}

.example-btn:hover {
  color: #4AB7BD;
  background-color: #fff;
  border-color: #4AB7BD;
}
.example {
  font-size: 50px;
  color: #F6416C;
  display: block;
  margin: 10px 0;
  text-align: center;
  font-size: 80px;
  font-weight: 500;
}

.label {
  color: #2f4f4f;
  font-size: 16px;
  display: inline-block;
  margin: 15px 30px 15px 0;
}

input {
  position: relative;
  display: inline-block;
  padding: 4px 7px;
  width: 70px;
  height: 28px;
  cursor: text;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(0, 0, 0, .65);
  background-color: #fff;
  background-image: none;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.startBtn {
  margin-left: 20px;
  font-size: 20px;
  color: #30B08F;
  background-color: #fff;
}

.startBtn:hover {
  background-color: #30B08F;
  color: #fff;
  border-color: #30B08F;
}

.pause-resume-btn {
  font-size: 20px;
  color: #E65D6E;
  background-color: #fff;
}

.pause-resume-btn:hover {
  background-color: #E65D6E;
  color: #fff;
  border-color: #E65D6E;
}
</style>
